<template>
    <main-wrap>
        <template v-slot:header>
            <Header title="订单详情"/>
        </template>
        <div class="mainbox">
            <order-status :orderDetail="orderDetail"/>
            <Logistics v-if="orderDetail.orderStatus && orderDetail.orderStatus.code!=50" :orderDetail="orderDetail"/>
            <product-list :lists="[orderDetail]" :type="2"/>
            <Contact :orderDetail="orderDetail"/>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Header from '@/components/header.vue'
import orderStatus from './components/orderStatus.vue'
import productList from './components/productList.vue'
import Contact from './components/contact.vue'
import Logistics from './components/logistics.vue'
import { toast } from '@/utils/common'
export default {
    props:{

    },
    components:{
        mainWrap,
        Header,
        orderStatus,
        productList,
        Contact,
        Logistics
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            orderId:'',
            orderDetail:{},
        })

        onMounted(()=>{
          state.orderId = route.params.id
          store.dispatch('arApi/get_my_order_detail',{
            orderId:state.orderId
          }).then(res=>{
            if(res.success){
              state.orderDetail = res.data
            }else{
              toast('获取订单详情出错了！')
            }
          })
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .mainbox{
        padding: 30px 40px;
    }
</style>